<template>
  <div class="app-container">
    <div class="filter-container">
      任务名称：<el-input v-model="listQuery.taskName" placeholder="任务名称" style="width: 200px; margin-right: 20px"
        class="filter-item" @keyup.enter.native="handleFilter" />
      任务策略：<el-select v-model="listQuery.taskStrategy" placeholder="任务策略" clearable
        style="width: 200px; margin-right: 20px" class="filter-item">
        <el-option label="单次任务" :value="1" />
        <el-option label="周期性任务" :value="2" />
      </el-select>

      任务状态：<el-select v-model="listQuery.taskStatus" placeholder="任务状态" clearable
        style="width: 200px; margin-right: 20px" class="filter-item">
        <el-option label="待执行" :value="1" />
        <el-option label="进行中" :value="2" />
        <el-option label="已完成" :value="3" />
        <el-option label="未执行" :value="4" />
        <el-option label="已终止" :value="5" />
      </el-select>
    </div>
    <div class="filter-container">
      任务周期：<el-date-picker v-model="searchTime" style="width: 400px; margin-right: 20px" type="daterange" align="right"
        unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
        value-format="yyyy-MM-dd" @change="handleTimeChange" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px" type="info" icon="el-icon-refresh-right"
        @click="handleRefresh">
        重置
      </el-button>
    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column label="序号" prop="id" width="100">
        <template slot-scope="{ row, $index }">
          {{ (listQuery.pageNo - 1) * listQuery.pageSize + $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="任务名称" prop="taskName" />
      <el-table-column label="执行航线" prop="routeName" />
      <el-table-column label="任务策略" prop="taskStrategy">
        <template slot-scope="{ row }">
          <div v-if="row.taskStrategy == 1">单次任务</div>
          <div v-if="row.taskStrategy == 2">周期性任务</div>
        </template>
      </el-table-column>
      <el-table-column label="执行周期" prop="executionCycle" />
      <el-table-column label="累计执行次数" prop="cumulativeExecutionTimes" />
      <el-table-column label="开始时间" prop="executionStartTime" />
      <el-table-column label="结束时间" prop="executionEndTime" />
      <el-table-column label="任务状态" align="center">
        <template slot-scope="{ row }">
          <div v-if="row.taskStatus == 1">待执行</div>
          <div v-if="row.taskStatus == 2">进行中</div>
          <div v-if="row.taskStatus == 3">已完成</div>
          <div v-if="row.taskStatus == 4">未执行</div>
          <div v-if="row.taskStatus == 5">已终止</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{ row, $index }">
          <el-button type="primary" size="mini" @click="toDetail(row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />
  </div>
</template>

<script>
import { taskRecordList } from '@/api/uavtask'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'TaskLog',
  components: { Pagination },
  data() {
    return {
      searchTime: '',
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        taskName: undefined,
        taskStrategy: undefined,
        taskStatus: undefined,
        executionStartTimeStr: undefined,
        executionEndTimeStr: undefined
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      taskRecordList(this.listQuery).then((response) => {
        this.list = response.list
        this.total = response.total
        this.listLoading = false
      })
    },
    toDetail(row) {
      this.$router.push({ path: '/task/detail', query: { id: row.id } })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleRefresh() {
      (this.listQuery = {
        pageNo: 1,
        pageSize: 20,
        taskName: undefined,
        taskStrategy: undefined,
        taskStatus: undefined,
        executionStartTimeStr: undefined,
        executionEndTimeStr: undefined
      }),
        this.getList()
    },
    handleTimeChange(e) {
      this.listQuery.executionStartTimeStr = e[0]
      this.listQuery.executionEndTimeStr = e[1]
    }
  }
}
</script>
